<template>
  <div>
    <div class="page-title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><a @click="$router.go(-1)">员工管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>员工新增</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="page-content">
      <div class="form-content">
        <br/>
          <el-form  :rules="rules"  ref="filterQuery"  label-width="150px" :model="filterQuery">     
               <el-row>
                 <el-col :span="12">
                   <el-form-item label="员工姓名："  prop="name">
                     <el-input v-model="filterQuery.name" placeholder="员工" style="width:100%"></el-input>
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="性别：">
                     <el-select v-model="filterQuery.sex" placeholder="性别" style="width: 100%;">
                       <el-option
                       clearable
                       v-for="item in sexes"
                       :key="item.id"
                       :label="item.name"
                       :value="item.name">
                       </el-option>
                     </el-select>
                     <!-- <el-input v-model="filterQuery.sex" placeholder="性别"></el-input> -->
                   </el-form-item>
                 </el-col>
               </el-row>
               <el-row>
                 <el-col :span="12">
                   <el-form-item label="底层单位：" prop="companyCode">
                     <treeselect
                     :multiple="false"
                     :options="options"
                     placeholder="请选择单位名称"
                     @select="selectDepart"
                     style="width:100%"
                     /> 
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="出生日期：">
                    <el-date-picker
                    v-model="filterQuery.birthday"
                    type="date"
                    style="width:100%"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                   </el-date-picker>             
                     <!-- <el-input v-model="filterQuery.birthday" placeholder="出生日期"></el-input> -->
                   </el-form-item>
                 </el-col>
               </el-row>
               <el-row>
                 <el-col :span="12">
                   <el-form-item label="员工编号：" prop="employeeCode">
                     <el-input v-model="filterQuery.employeeCode" placeholder="输入员工编号"></el-input>
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="参加工作时间：">
                     <el-date-picker
                     v-model="filterQuery.jobTime"
                     type="date"
                     style="width:100%"
                     format="yyyy-MM-dd"
                     value-format="yyyy-MM-dd"
                     placeholder="选择日期">
                     </el-date-picker> 
                     <!-- <el-input v-model="filterQuery.jobtime" placeholder="参加工作时间"></el-input> -->
                   </el-form-item>
                 </el-col>
               </el-row>
               <el-row>
                 <el-col :span="12">
                   <el-form-item label="所在科室：" prop="empGroup">
                     <el-autocomplete 
                      v-model="inputEmpGroup"
                      clearable
                      :fetch-suggestions="querySearch2"
                      placeholder="所在科室"
                      style="width:100%"
                      :trigger-on-focus="true">
                      </el-autocomplete>
                  </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="文化程度：">
                     <el-select  v-model="filterQuery.education" placeholder="文化程度" clearable style="width:100%">
                       <el-option 
                       clearable
                       v-for="item in education1" 
                       :key="item.id" 
                       :label="item.name" 
                       :value="item.name">
                       </el-option>
                     </el-select>
                   </el-form-item>
                 </el-col>
               </el-row>
               <el-row>
                 <el-col :span="12">
                   <el-form-item label="员工类别："  prop="category">
                     <el-select v-model="filterQuery.category" placeholder="请选择员工类别" style="width:100%">
                      <el-option
                        v-for="item in categorys"
                        :key="item.label"
                        :label="item.label"
                        :value="item.label">
                      </el-option>
                    </el-select>
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="邮箱：" prop="email" :required="false">
                     <el-input v-model="filterQuery.email" placeholder="邮箱" ></el-input>
                   </el-form-item>
                 </el-col>
               </el-row>
               <el-row> 
                <el-col :span="12">
                   <el-form-item>
                   </el-form-item>
                 </el-col>   
                 <el-col :span="12">
                   <el-form-item label="手机号码："  prop="tel" :required="false">
                     <el-input v-model="filterQuery.tel" placeholder="手机号码" ></el-input>
                   </el-form-item>
                 </el-col>      
               </el-row>
               <el-form-item>
              <el-button type="primary" @click="handleSubmit('filterQuery')" icon="el-icon-check">确定</el-button>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a @click="$router.go(-1)">
              <el-button type="danger" native-type="button" icon="el-icon-refresh-left">取消</el-button>
            </a>
           </el-form-item>  
          </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {CreateStaff} from '../../../services/staffmanagement'
import {GetDictionary} from '../../../services/dictionary'
import {GetStaffList} from '../../../services/staffmanagement'
import {GetCompany} from  '../../../services/problemRankAnalysis'
// import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  data() {
    return{
      filterQuery:{
        name:'',
        sex:'',
        companyCode:null,
        topFourCompanyCode:null,
        birthday:'',
        jobTime:'',
        empGroup:'',
        education:'',
        position:'',
        employeeCode:'',
        email:'',
        station:'',
      },
        inputEmpGroup:'',
        sexes:[],
        education1:[],
        empGroups:[],
        positions:[],
        options:[],
        stations:[],
        categorys:[{value: 'ERP',label: 'ERP'},{value: '非ERP',label: '非ERP'}],
        rules:{
        name :[{required: true, message: '请填写员工姓名', trigger: 'blur' }],
        companyCode :[{required: true, message: '请选择单位名称', trigger:'change' }],
        // employeeCode :[{required: true, message: '请填写员工编号', trigger: 'blur' }],
        // empGroup :[{required: true, message: '请选择科室', trigger: 'change' }],
        // position :[{required: true, message: '请选择职位', trigger: ['blur', 'change']}],
        // station :[{required: true, message: '请选择岗位', trigger: ['blur', 'change'] }],
        category :[{required: true, message: '请选择员工类别', trigger: ['blur', 'change'] }],
        // email: [{required: false, validator: checkEmail, trigger: 'blur' }],
        // tel: [{ required: false,validator: checkPhone, trigger: 'blur' }],
        email: [{required: false,trigger: ['blur', 'change'] },{
          validator:function(rule,value,callback){
            if(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(value) == false && ' ' != value && '' != value){
                callback(new Error("请输入正确的邮箱格式"));
            }else{
                callback();
            }
        }
         }],
        tel: [{ required: false, trigger: ['blur', 'change'] },{
          validator:function(rule,value,callback){
            if(/^1[34578]\d{9}$/.test(value) == false && ' ' != value && '' != value){
                callback(new Error("请输入正确的手机号"));
            }else{
                callback();
            }
        }
        }],
      }
    } 
  },
  mounted(){
   this.getempGroups()
   this.getpositions()
   this.handleGetCompany()
   this.getsex()
   this.geteducation()
   this.getstation()

  },
  methods: {
     selectDepart(val) {
      this.filterQuery.companyCode = val.nodeCode;
    },
    handleSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.filterQuery.empGroup = this.inputEmpGroup
          CreateStaff(this.filterQuery).then(() => {
            // alert(JSON.stringify(this.filterQuery))
            this.$message.success('创建成功')
            this.$router.go(-1) //返回上一url
            }).catch((err) => {
              this.$message.error(err.message)
              })
          // alert('submit!');
        } else {
          return false;
        }
      });   
},
              
    //获取底层单位
      handleGetCompany(){
      GetCompany().then((res) => {
        this.options = res.data 
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    //获取二级单位

    getempGroups(){
      GetStaffList({type:"all"}).then((res) => {  
        for(let i=0;i<res.data.length;i++){
          if(this.empGroups.indexOf(res.data[i]) === -1){
            this.empGroups.push({"value": res.data[i].empGroup}) 
          }
        }
        this.loading = false
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    querySearch2(queryString, cb) {
      let results = queryString ? this.empGroups.filter(this.createStateFilter2(queryString)) : this.empGroups;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter2(queryString) {
      return (inputEmpGroup) => {
        return (inputEmpGroup.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1); 
      };
    },
    //获取职位表字典
    getpositions () {
      GetDictionary({name:'职位'}).then((res) => {
        this.positions = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    //获取性别
    getsex(){
      GetDictionary({name:'性别'}).then((res) => {
        this.sexes = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    //获取文化程度
    geteducation(){
      GetDictionary({name:'文化程度'}).then((res) => {
        this.education1 = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    //获取岗位
    getstation(){
      GetDictionary({name:'岗位'}).then((res) => {
        this.stations = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    }



    
  },
}

 
</script>
<style lang="scss" scoped>
.form-content {
  max-width: 800px;
}


</style>
